<template>
    <div>
        <el-card>
            <el-form class="search" :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
                <el-form-item prop="timeTag">
                    <el-select v-model="queryParams.timeTag" size="small" style="width: 80px" @change="handleQuery">
                        <el-option :value="1" label="按秒"/>
                        <el-option :value="2" label="按分"/>
                        <el-option :value="3" label="按时"/>
                        <el-option :value="4" label="按日"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="表名">
                    <el-select v-model="queryParams.tableTag" size="small" style="width: 120px" @change="handleQuery">
                        <el-option v-for="row in tableOption" :value="row" :label="row"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间范围" prop="dateRange">
                    <el-date-picker clearable size="small"
                                    v-model="queryParams.dateRange"
                                    type="datetimerange"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    range-separator="-"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    @change="handleQuery">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <el-button type="primary" icon="el-icon-download" size="mini" @click="exportHisTable">导出</el-button>
                </el-form-item>
            </el-form>

            <el-table ref="table" v-loading="loading" :data="hisList" border size="small" height="calc(100% - 70px)">
                <el-table-column label="序号" align="center" width="60" :formatter="formatSort"/>
                <el-table-column v-for="row in codeList" :label="row.cacheDescr?row.cacheDescr:row.cacheCode"
                                 align="center"
                                 :width="getWidth(row)"
                                 :prop="row.cacheCode"/>
            </el-table>

            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </el-card>
    </div>
</template>

<script>
    import {
        getHisTableOption,
        pageHisTable,
        exportHisTable
    } from '@/api/app/plc/cache'

    export default {
        name: 'HisTable',
        components: {},
        data() {
            return {
                // 遮罩层
                loading: false,
                // 总条数
                total: 0,
                hisList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 20,
                    tableTag: null,
                    dateRange: [this.moment().format('YYYY-MM-DD 00:00:00'), this.moment().add(1, 'd').format('YYYY-MM-DD 00:00:00')],
                    // dateRange: ['2023-02-27 00:00:00', '2023-02-27 02:00:00'],
                    timeTag: 1
                },
                tableOption: [],
                codeList: []
            }
        },
        created() {
            this.getHisTableOption()
        },
        methods: {
            getHisTableOption() {
                getHisTableOption().then(res => {
                    this.tableOption = res.data
                    if (this.tableOption.length > 0) {
                        this.queryParams.tableTag = this.tableOption[0]
                        this.getList()
                    }
                })
            },
            getList() {
                let data = {
                    pageNum: this.queryParams.pageNum,
                    pageSize: this.queryParams.pageSize,
                    tableTag: this.queryParams.tableTag,
                    timeTag: this.queryParams.timeTag
                }
                if (!this.queryParams.dateRange) {
                    this.queryParams.dateRange = [this.moment().format('YYYY-MM-DD 00:00:00'), this.moment().add(1, 'd').format('YYYY-MM-DD 00:00:00')]
                }
                if (this.queryParams.dateRange) {
                    data.startDt = this.queryParams.dateRange[0]
                    data.endDt = this.queryParams.dateRange[1]
                }

                this.loading = true
                pageHisTable(data).then(res => {
                    this.codeList = res.data.codeList
                    if (this.codeList.length > 0) {
                        this.codeList.unshift({cacheCode: 'dt', cacheDescr: '时间', cacheType: 4})
                    }
                    this.hisList = res.data.rows
                    this.total = res.data.total
                    this.loading = false
                    this.$nextTick(() => { //调用doLayout重新渲染表格
                        this.$refs['table'].doLayout();
                    })
                })
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1
                this.getList()
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm('queryForm')
                this.handleQuery()
            },
            getWidth(row) {
                if (row.cacheType == 4) return '160'
            },
            formatSort(row, column, cellValue, index) {
                return index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
            },
            exportHisTable() {
                let data = {
                    tableTag: this.queryParams.tableTag,
                    timeTag: this.queryParams.timeTag
                }
                if (!this.queryParams.dateRange) {
                    this.queryParams.dateRange = [this.moment().format('YYYY-MM-DD 00:00:00'), this.moment().add(1, 'd').format('YYYY-MM-DD 00:00:00')]
                }
                if (this.queryParams.dateRange) {
                    data.startDt = this.queryParams.dateRange[0]
                    data.endDt = this.queryParams.dateRange[1]
                }
                exportHisTable(data).then(res => {
                    this.download(res.msg)
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep {
        .el-card, .el-card__body {
            height: 100%;
        }
    }
</style>
